明天開始，終於不用趕著發文，最後一天，輕鬆閒聊一些尚未發文討論的網頁設計相關主題和鐵人賽總結。

常用VSCode套件

Vscode是現在最廣泛使用的編輯輯，介紹一些我在開發前端網頁常用的VSCode套件

• Live Server：可直接幫你開一port來觀看網頁執行的結果。
• Bracket Pair Color DLW：可以讓成對的括號用相同的顏色區別，比較容易尋找。
• Auto Close Tag：可自動幫HTML產生結束標籤。
• Material Icon Theme：在檔案導覽上，可以用不同的Icon圖示檔案類型。

Sass

在撰寫CSS時，有時會感到凌亂而缺乏組織感，這個時候可以考慮使用SCSS。SCSS是CSS預處理器，主要是支援巢狀寫法，讓我們的SCSS更有結構，也不用書寫重複的開頭。另外也有變數（Variables）、混入（Mixins）、繼承（Extend）、匯入（Import）…等功能，讓CSS更像是一種程式語言，有類似函式的作用，檔案結構更好維護。

Sass有分Sass和Scss，Sass採用縮排式語法表示巢狀結構，優點是程式更為簡潔，可以少寫一些碼，缺點則是無法兼容原來的CSS；Scss則採用大括號表示巢狀結構，好處是可以兼容原來的CSS，新手較容易入門。

CSS框架

使用Bootstrap外，客製化會比較不容易，如果想要客製化，除了自己寫CSS外，最近比較流行Utility-First的tailwind，是不錯的考慮。不過使用CDN下載tailwind不能發揮它最大的優勢，因此最好能學npm，哇，怎麼那麼多要學，我看還是算了 ，不過還是看個人的時間允不允許，一切都不能勉強。

設計方面

教學網頁如果能有好的設計頁面，使用起來賞心悅目，也能抓住學生的眼光。一般人雖然不是設計專科出身，但是現在網路資源豐沛，提供配色和UI（使用者介面）設計資源給我們參考，只要稍加接觸，也可以作出還不錯的頁面。Material Design提供系統性的設計概念和資源，可以探索一番，增進設計的能力；Figma則整合了許多設計資源，並專門為網頁和手機App支援許多功能，也可以多加利用。

前端框架

前端框架主要核心概念是由資料決定畫面，並將使用者介面（UI）模組化。雖然教學網頁不太需要處理後端資料，但還是透過框架協助DOM處理，可以免去學習Javascript複雜DOM處理。目前較為流行的框架有React、Vue和Angular，React由Facebook開發，Angular則是Google支持，如果從網頁設計就業的市場來看，React和Angular會比較有利；以個人開發來說，Vue提供漸進式的方式引入框架，容易入門，現在流行度也很高，我自己現在便是用Vue作為開發框架。

Git和Github

多人協作的時候，版本控制變得格外重要，即便一個人開發，最好也能進行版本管理。Git是目前最常使用的版本控制軟體，在網頁開發來說是值得學習的技能。Github是全球最大線上軟體原始碼代管服務平台，可以作為我們Git的遠端代碼免費放置的場所，可以善加利用它的資源。

Node.js和NPM

Node.js是以Chrome的V8作為解析和執Javascript的環境，一些和網頁無關的Javascript可以在Node.js環境執行，發文中有幾篇的原始碼便是在Replit中的Node.js環境中執行。

NPM則是Javascript的套件管理，下載Node.js的時候會順帶下載。之前發文都是利用CDN的方式下載我們的套件，我們可以利用NPM下載我們需要的套件，管理起來會更方便。

總結

回過頭來，看了鐵人賽第一天的規劃，所寫的內容大致在計劃之內，初步來說，可以算完成個人目標。本來最擔心的部分是實例的部分，撰寫實例是最耗費時間，有時簡單而莫名的錯誤，不管是語法上或邏輯上的錯誤，都可以弄掉半天時間，不過，這本來就是寫程式必經的過程。也有些事情是在意料之外的收穫，當初設定教學網頁設計時，心中並沒有雛形。隨著慢慢模擬自己在教室教學，才發現自己需要一個可以代替簡報軟體的網頁；這個簡報的左邊是圖例，而右邊是我的文字或運算式說明，於是教學網頁的外觀才慢慢成形。另外，一個廣告語，讓我體認到大部分的數學老師，應該不會願意自己慢慢撰寫大量的CSS程式碼，於是引入了「Swiper.js」。

這次發文意外的引入了一些機械和電機控制器方面的主題，這是資訊領域較少接觸的知識，令自己也收穫不少。數學是科學的基礎，能夠在更多的領域看見它的身影，更顯得它的重要性。

數學教學網頁開發的困境，目前市面上已經有非常多的英文教學網頁，但是關於數學方面的教學網頁可以說不多，主要的困難在於理工方面的知識難度門檻高，專業的網頁設計人員並沒有設計教案的能力；而擁有教案設計能力的教師，又不具備網頁設計能力。我認為數學教學網頁設計人員必須這兩種能力都具備，比較有可能的途徑是由數學教師學習網頁設計，當然線上的數學教師要應付教學壓力，基本上沒有太多的時間學習，希望我們的教育主管單位能整合一些有興趣的老師，尤其是跨領域整合設計專長的老師，共同開發出兼顧設計和實務上有用的教學網頁。

感謝

總之，這次的鐵人賽是一個拋磚引玉的概念，只是一個「開始」，而不是「結束」，由於時間的緣故，好多主題想要深入擴充，都踩了暫停鈕。完賽之後，可以將每個主題都做一些更深入的探討，若有成品，也會不定期在iT邦幫忙發文，最後感謝曾經支持的朋友，後會有期！